<!-- 投注留存 -->
<template>
  <SearchTable :query="data.query" :list="data.list" :total="data.total" :showExport="true" @changeSize="changeSize"
    @download="getExport" @changePage="changePage" @search="getSearchList" @reset="onHideDetails(true)" @sort="sortTable"
    @changeTh="data.dialogVisible = true">
    <template #form>
      <el-form-item :label="t('70')+':'">
        <el-date-picker v-model="data.query.date" type="daterange" range-separator="-" :start-placeholder="t('26')"
          :end-placeholder="t('27')" value-format="YYYY-MM-DD" clearable :disabled-date="indexStore.disabledDateTime"/>
      </el-form-item>
    </template>
    <template #button></template>
    <template #table>
      <template v-for="(item, index) in data.fields" :key="index">
        <el-table-column v-if="item.visible" :prop="item.prop" :label="item.label" :width="item.width"
        :sortable="item.sortable ? 'custom' : false">
          <template #header>
            <el-tooltip v-if="item.tips" effect="dark" placement="top">
              <template #content> {{item.tips}} </template>
              <el-icon class="ques-tips">
                <QuestionFilled />
              </el-icon>
            </el-tooltip>
            {{ item.label }}
          </template>
          <!-- <template v-if="item.prop == 'agent_id'" #default="scope">
            {{ selectToLabel(indexStore.agentArray, scope.row.agent_id) }}
          </template> -->
          <template v-if="item.prop == 'one_num'" #default="scope">
            {{ scope.row.radio_1 }} ({{ scope.row.one_num }}/{{ scope.row.person_num }})
          </template>
          <template v-if="item.prop == 'three_num'" #default="scope">
            {{ scope.row.radio_3 }} ({{ scope.row.three_num }}/{{ scope.row.person_num }})
          </template>
          <template v-if="item.prop == 'seven_num'" #default="scope">
            {{ scope.row.radio_7 }} ({{ scope.row.seven_num }}/{{ scope.row.person_num }})
          </template>
          <template v-if="item.prop == 'fifteen_num'" #default="scope">
            {{ scope.row.radio_15 }} ({{ scope.row.fifteen_num }}/{{ scope.row.person_num }})
          </template>
          <template v-if="item.prop == 'thirty_num'" #default="scope">
            {{ scope.row.radio_30 }} ({{ scope.row.thirty_num }}/{{ scope.row.person_num }})
          </template>
        </el-table-column>
      </template>
      <el-table-column fixed="right" :label="t('97')" width="90" align="center">
        <template #header>
          <el-tooltip effect="dark" :content="t('590')" placement="top">
            <el-icon class="ques-tips">
              <QuestionFilled />
            </el-icon>
          </el-tooltip>
          {{ t('46') }}
        </template>
        <template #default="scope">
          <el-button type="primary" size="small" @click="checkDetails(scope.row)">
            {{ t('46') }}
          </el-button>
        </template>
      </el-table-column>
    </template>
  </SearchTable>

  <!-- 变更表头弹框 -->
  <tableHeader :dialogVisible="data.dialogVisible" :list="data.fields" @cancel="data.dialogVisible = false"
    @resetData="resetData"></tableHeader>

  <!-- 留存详情 -->
  <el-dialog v-model="data.isShowDetails" width="78%" :title="t('591')" :close-on-click-modal="false"
    :close-on-press-escape="false" @close="onHideDetails" top="12vh">
    <div class="dialogMax">
      <SearchTable :query="data.queryDetails" :list="data.listDetails" :total="data.totalDetails" :showSet="false"
        @changeSize="changeSizeDetails" @changePage="changePageDetails" @reset="onHideDetails(true)"
        @search="getSearchDetailsList">
        <template #form>
          <el-form-item :label="t('70')+':'">
            <el-date-picker v-model="data.queryDetails.date" type="daterange" range-separator="-" :start-placeholder="t('26')"
              :end-placeholder="t('27')" value-format="YYYY-MM-DD" clearable :disabled-date="indexStore.disabledDateTime"/>
          </el-form-item>
          <el-form-item :label="t('36')">
            <el-select v-model="data.queryDetails.game_id" :placeholder="t('340')" filterable>
              <el-option :label="t('21')" :value="-1" />
              <el-option v-for="item in indexStore.gameArray" :key="item.value"
                :label="'【' + item.value + '】' + GameName(indexStore.gameArray,item.value)" :value="item.value" />
            </el-select>
          </el-form-item>
        </template>
        <template #table>
          <template v-for="(item, index) in data.fieldDetails" :key="index">
            <el-table-column v-if="item.visible" :prop="item.prop" :label="item.label" :width="item.width"
              show-overflow-tooltip>
              <template #header>
                <el-tooltip v-if="item.tips" effect="dark" placement="top">
                  <template #content>
                    {{item.tips}}
                  </template>
                  <el-icon class="ques-tips">
                    <QuestionFilled />
                  </el-icon>
                </el-tooltip>
                {{ item.label }}
              </template>
              <template v-if="item.prop == 'game_id'" #default="scope">
                <div class="gameIconShow">
                  <div><img class="game-icon" :src="selectToLabel(GAMEICON, scope.row.game_id)" alt=""></div>
                  {{ GameName(indexStore.gameArray, scope.row.game_id) }}
                </div>
              </template>
              <template v-if="item.prop == 'radio'" #default="scope">
                {{ scope.row.radio }} ({{ scope.row.today_reg_bet_num }}/{{ scope.row.today_reg_num }})
              </template>
              <template v-if="item.prop == 'one_num'" #default="scope">
                {{ scope.row.radio_1 }} ({{ scope.row.one_num }}/{{ scope.row.person_num }})
              </template>
              <template v-if="item.prop == 'three_num'" #default="scope">
                {{ scope.row.radio_3 }} ({{ scope.row.three_num }}/{{ scope.row.person_num }})
              </template>
              <template v-if="item.prop == 'seven_num'" #default="scope">
                {{ scope.row.radio_7 }} ({{ scope.row.seven_num }}/{{ scope.row.person_num }})
              </template>
              <template v-if="item.prop == 'fifteen_num'" #default="scope">
                {{ scope.row.radio_15 }} ({{ scope.row.fifteen_num }}/{{ scope.row.person_num }})
              </template>
              <template v-if="item.prop == 'thirty_num'" #default="scope">
                {{ scope.row.radio_30 }} ({{ scope.row.thirty_num }}/{{ scope.row.person_num }})
              </template>
            </el-table-column>
          </template>
        </template>
      </SearchTable>
    </div>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, toRefs, onMounted, computed } from 'vue'
import tableHeader from '@/components/tableHeader/tableHeader.vue'
import SearchTable from '@/components/SearchTable/SearchTable.vue'
import { GAMEICON } from '@/config/eunm'
import { getAgentRemainList, getRemainList } from '@/api/report'
import { getWeek, setTimeValue, setTimestampTimeDate } from '@/utils/time'
import { throttle, selectToLabel,GameName } from '@/utils/index'
import { exportToExcel } from '@/utils/export'
import { BigWan, BigPercent } from '@/utils/math'

import { useStore } from '@/stores/index'
const indexStore = useStore()
import { useI18n } from 'vue-i18n'
const { t } = useI18n()

const data = reactive({
  query: {
    page: 1,
    size: 50,
    game_id: -1,
    date: getWeek(0),
    order_type: '',
    up_or_down: '', // asc desc
  },
  list: [],
  total: 0,
  checkedItem: {} as any,
  echartLegend: [] as string[],
  echartXAxis: [] as string[],
  echartSeries: [] as any[],
  fields: [
    { label: t('70'), prop: 'date', width: '120', visible: true, tips: t('592') },
    { label: t('602'), prop: 'person_num', width: '', visible: true, tips: t('593'), sortable: true },
    { label: t('605'), prop: 'one_num', width: '', visible: true, tips: t('597'), sortable: true },
    { label: t('606'), prop: 'three_num', width: '', visible: true, tips: t('598'), sortable: true },
    { label: t('607'), prop: 'seven_num', width: '', visible: true, tips: t('599'), sortable: true },
    { label: t('608'), prop: 'fifteen_num', width: '', visible: true, tips: t('600'), sortable: true },
    { label: t('609'), prop: 'thirty_num', width: '', visible: true, tips: t('601'), sortable: true }
  ],
  dialogVisible: false,
  exportLoading: false,
  dataActive: 0,
  detailLoading: false,
  isShowDetails: false,
  queryDetails: {
    page: 1,
    size: 50,
    game_id: -1,
    date: getWeek(0)
  },
  listDetails: [],
  totalDetails: 0,
  fieldDetails: [
    { label: t('70'), prop: 'date', width: '120', visible: true, tips: t('592') },
    { label: t('41'), prop: 'game_id', width: '200', visible: true, tips: t('594') },
    { label: t('602'), prop: 'person_num', width: '', visible: true, tips: t('593') },
    { label: t('603'), prop: 'today_reg_bet_num', width: '150', visible: true, tips: t('595')},
    { label: t('604'), prop: 'radio', width: '160', visible: true, tips: t('596')},
    { label: t('605'), prop: 'one_num', width: '', visible: true, tips: t('597')},
    { label: t('606'), prop: 'three_num', width: '', visible: true, tips: t('598')},
    { label: t('607'), prop: 'seven_num', width: '', visible: true, tips: t('599')},
    { label: t('608'), prop: 'fifteen_num', width: '', visible: true, tips: t('600')},
    { label: t('609'), prop: 'thirty_num', width: '', visible: true, tips: t('601')}
  ]
})

onMounted(async () => {
  getSearchList()
})

// 留存列表
const getSearchList = throttle(async () => {
  data.query = setTimeValue(data.query)
  indexStore.setPageLoading(true)
  let res = await getAgentRemainList(data.query);
  res.data?.list?.forEach((item: any) => {
    item.date = setTimestampTimeDate(item.date)
    item.radio_1 = BigPercent(item.one_num, item.person_num)
    item.radio_3 = BigPercent(item.three_num, item.person_num)
    item.radio_7 = BigPercent(item.seven_num, item.person_num)
    item.radio_15 = BigPercent(item.fifteen_num, item.person_num)
    item.radio_30 = BigPercent(item.thirty_num, item.person_num)
  })
  data.list = res.data.list
  data.total = res.data.total
  indexStore.setPageLoading(false)
}, 2000)

// 详情
const checkDetails = async (row: {
  operated_id: number,
  date: number
}) => {
  Object.assign(data.checkedItem, row)
  data.queryDetails.game_id = -1
  data.queryDetails.date = [row.date, row.date]
  getSearchDetailsList()
}
const getSearchDetailsList = async () => {
  data.detailLoading = true
  data.queryDetails = setTimeValue(data.queryDetails)
  let res = await getRemainList(data.queryDetails)
  data.isShowDetails = true
  res.data?.list?.forEach((item: any) => {
    item.date = setTimestampTimeDate(item.date)
    item.radio = BigPercent(BigWan(item.today_reg_bet_num), BigWan(item.today_reg_num)) // 新用户投注占比 = 游戏投注人数 / 商户注册人数
    item.radio_1 = BigPercent(item.one_num, item.person_num)
    item.radio_3 = BigPercent(item.three_num, item.person_num)
    item.radio_7 = BigPercent(item.seven_num, item.person_num)
    item.radio_15 = BigPercent(item.fifteen_num, item.person_num)
    item.radio_30 = BigPercent(item.thirty_num, item.person_num)
  })
  data.detailLoading = false
  data.listDetails = res.data.list
  data.totalDetails = res.data.total
}

// 排序
const sortTable = async (val:any) => {
  data.query.up_or_down = val.order
  data.query.order_type = val.prop=='person_num' ? val.prop:val.prop +'/person_num'
  getSearchList()
}


// 导出
const getExport = async () => {
  let query = JSON.parse(JSON.stringify(data.query));
  query.page = 1
  query.size = 10000
  let res = await getAgentRemainList(query);
  let dataList = res.data;

  let header: string[] = []
  let list: never[][] = []

  data.fields.forEach((item) => {
    header.push(item.label)
  })

  dataList.forEach((item: { [x: string]: any }, index: any) => {
    let arr: never[] = []
    data.fields.forEach((x) => {
      switch (x.prop) {
        case 'date':
          arr.push(setTimestampTimeDate(item[x.prop]) as never)
          break
        case 'one_num':
          arr.push(`${BigPercent(item['one_num'], item['person_num'])} (${item['one_num']}/${item['person_num']})` as never)
          break
        case 'three_num':
          arr.push(`${BigPercent(item['three_num'], item['person_num'])} (${item['three_num']}/${item['person_num']})` as never)
          break
        case 'seven_num':
          arr.push(`${BigPercent(item['seven_num'], item['person_num'])} (${item['seven_num']}/${item['person_num']})` as never)
          break
        case 'fifteen_num':
          arr.push(`${BigPercent(item['fifteen_num'], item['person_num'])} (${item['fifteen_num']}/${item['person_num']})` as never)
          break
        case 'thirty_num':
          arr.push(`${BigPercent(item['thirty_num'], item['person_num'])} (${item['thirty_num']}/${item['person_num']})` as never)
          break
        default:
          arr.push(item[x.prop] as never)
          break
      }
    })
    list.push(arr)
  })

  exportToExcel(list, header, '投注留存')
}

// 修改页数
const changeSize = (val: number) => {
  data.query.size = val
}
const changePage = (val: number) => {
  data.query.page = val
  getSearchList()
}
const changePageDetails = (val: number) => {
  data.queryDetails.page = val
  getSearchDetailsList()
}
const changeSizeDetails = (val: number) => {
  data.queryDetails.size = val
}

// 重置表头
const resetData = (val: any) => {
  data.fields = val
}

// 重置
const OperatorRef = ref<any>()
const onHideDetails = (show: boolean) => {
  data.dialogVisible = false
  data.exportLoading = false
  data.detailLoading = false
  if (show) {
    if (data.isShowDetails) {
      data.queryDetails = {
        page: 1,
        size: 50,
        game_id: -1,
        date: [data.checkedItem.date, data.checkedItem.date]
      }
      getSearchDetailsList()
    } else {
      data.query = {
        page: 1,
        size: 50,
        game_id: -1,
        date: getWeek(0),
        order_type: '',
        up_or_down: '', // asc desc
      }
      getSearchList()
    }
    OperatorRef.value.onHideDetails()
  }
}
</script>

<style scoped lang="scss">
.padding20 {
  background-color: var(--background);
}
</style>